<template>
    <el-card shadow="never">
        <template #header>
            <div class="card_header">
                <b>修改信息</b>
                <!-- <el-page-header content="detail" /> -->
            </div>
        </template>
        <el-form class="update_form" status-icon ref="ruleFormRef" label-width="120px" :model="ruleForm" :rules="rules">
            <el-form-item label="编号" prop="username">
                <el-input v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="班级" prop="cls">
                <el-input v-model="ruleForm.cls" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone" />
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="ruleForm.address" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>


<script >
import { onBeforeMount, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { studentService } from '../../interfaces/service'


export default {
    component: {},
    setup(props) {

        const router = useRouter()
        const route = useRoute()

        onBeforeMount(() => {
            const id = route.params['id']
            studentService.getStudent({ id: id })
                .then(res => {
                    if (res.success) {
                        const data = res.data
                        ruleForm.value = data
                    }
                })
        })


        const ruleFormRef = ref(null)
        const ruleForm = ref({
            // username: '',
            // name: '',
            // cls: '',
            // phone: '',
            // email: '',
            // address: '',
        })
        const rules = reactive({
            username: [
                { required: true, message: '编号不能为空', trigger: 'blur' },
                { min: 2, max: 9, message: '编号为9各数字', trigger: 'blur' },
            ], name: [
                { required: true, message: '姓名不能为空', trigger: 'blur' },
                { min: 2, max: 7, message: '姓名为2个到7个字', trigger: 'blur' },
            ],
            cls: [
                {
                    required: true,
                    message: '班级不能为空',
                    trigger: 'blur',
                },
            ],
            phone: [
                {
                    required: true,
                    message: '手机不能为空',
                    trigger: 'blur',
                },
            ],
        })

        const submitForm = (formEl) => {
            if (!formEl) return
            console.log(formEl);
            formEl.validate((valid, fields) => {

                console.log(valid, fields);
                if (valid) {
                    studentService.updateStudent(ruleForm.value)
                        .then(res => {
                            if (res.success) {
                                ElMessage.success("添加成功")
                            }
                        })
                } else {
                    console.log('error submit!', fields)
                }
            })
        }

        const resetForm = (formEl) => {
            if (!formEl) return
            formEl.resetFields()
        }

        return {
            rules,
            ruleForm,
            ruleFormRef,
            resetForm,
            submitForm,
        }
    }
}


</script>



<style lang="scss" scoped>
.update_form {
    width: 50%;
}
</style>